<script setup>
import { computed, reactive, ref } from 'vue';


// 指令
const vText = "<span style='color:red'>我是一个文本</span>";
const vHtml = "<span style='color:red'>我是一个文本</span>";
const usernameTip = "请输入用户名";
const usernameShow = ref();

// 数字
const n1 = ref(1);
const n2 = ref(1);
const n3 = ref(1);

// if
const scoreType = ref("H");

// 定义一个数组类型的数据
const kecheng = reactive(['VUE开发', '大学英语', 'JavaWeb', '物理', '化学']);

// 冒泡的演示及处理  在事件上添加.stop修饰符
function show(info)
{
  alert(info);
}

// 计算属性
const shuxi1 = ref("王庆波老师");
const reShuxi = computed(() => {
  return shuxi1.value.split("").reverse().join("");
})
</script>

<template>
 <h1>第二个组件</h1>

  <br>
  <hr>
  <div v-text="vText"></div><br>
  <div v-html="vHtml"></div>
  <br>
  用户名：<input type="text" :placeholder="usernameTip" v-on:keyup.enter="show('回车键被按下')" v-model="shuxi1"></input><br>Show"></input><br>
  你输入的用户名：{{ usernameShow }} <br>
  <input type="text" v-model.number="n1"></input> + <input type="text" v-model.number="n2"></input> = {{ n1 + n2 }}
  <br>
  <p v-if="scoreType === 'A'">优秀</p>
  <p v-else-if="scoreType === 'B'">良好</p>
  <p v-else>差</p>
  <br>
  <br>
  <span v-for="(e,i) in kecheng">
    课程名称：{{ e }}，课程序号：{{ i + 1 }}
  </span>

 <br>
 <br>
 <div style="height: 200px;width: 200px;background-color: red;" @click="show('点击了红色区域')">

  <div style="height: 100px;width: 100px;background-color: blue;" @click.stop="show('点击了蓝色区域')">

    
  </div>
 </div>
<br>
计算属性：{{ shuxi1 }} <br>
反转后：{{ reShuxi }}
</template>

<style ></style>